.btn
  outline: none
  color: inherit
  padding: 0
  background-color: transparent
  border-radius: 0
  border: none
  cursor: pointer
  text-decoration: none
  transition-property: color, background-color, border
  @include transition
  &_login
    border: 2px solid $dark
    border-radius: 77px
    &:focus
      outline: none
      background-color: $primary-light
    &:hover
      color: $white
      background-color: $dark
    &:active
      background-color: $primary-shade
      color: $white
      border-color: $primary-shade
    &:hover .btn__svg path
      stroke: $white
  &_primary_main
    color: $white
    background-color: $primary
    border: 2px solid $primary
    border-radius: 40px
    &:focus
      outline: none
      background-color: $primary-light
      border-color: $primary-shade
    &:hover
      background-color: $primary-light
      border-color: $primary-light
    &:active
      background-color: $primary-shade
      border-color: $primary-shade
  &_primary_second
    color: $primary
    background-color: transparent
    border: 2px solid $primary
    border-radius: 40px
    &:focus
      outline: none
      color: $white
      background-color: $primary-light
      border-color: $primary
    &:hover
      color: $white
      background-color: $primary
      border-color: $primary
    &:active
      color: $white
      background-color: $primary-shade
      border-color: $primary-shade
  &_light
    color: $primary-light
    background-color: transparent
    border: 2px solid $primary-light
    border-radius: 77px
    &:focus
      outline: none
      color: $white
      background-color: $primary
      border-color: $primary
    &:hover
      color: $white
      background-color: $primary-light
      border-color: $primary-light
    &:active
      color: $white
      background-color: $primary-shade
      border-color: $primary-shade
  &_promo
    display: inline-flex
    align-items: center
    color: $promo
    background-color: transparent
    border: 2px solid $promo
    border-radius: 100px
    &:focus
      outline: none
      color: $black
      background-color: $promo-shade
    &:hover
      color: $black
      background-color: $promo
    &:active
      color: $black
      background-color: $promo-shade
      border-color: $promo-shade

.btn__svg path
  transition-property: fill, stroke
  @include transition
